<template>
  <div class="list-wrapper">
    <div
      class="item-wrapper"
      v-for="item of list"
      :key="item.movie_id"
    >
      <router-link :to="'/detail/' + item.movie_id">
        <div class="item">
          <div class="item-top">
            <img :src="item.cover_pic" class="item-img"/>
          </div>
          <div class="item-middle">
            <div class="item-title">{{item.name}}</div>
            <div class="item-score">{{item.douban_score}}</div>
          </div>
          <div class="item-bottom">
            <div class="item-desc">{{item.classification}}</div>
            <div class="item-comment">
              <div class="iconfont comment-icon">&#xe600;</div>
              <div class="item-comment-num">
                {{item.comment_count}}
              </div>
            </div>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Listc',
  props: {
    list: Array
  },
  data () {
    return {
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .list-wrapper
    overflow: hidden
    .item-wrapper
      box-sizing: border-box
      float: left
      width: 50%
      padding: .10rem
      .item
        border: #ccc 1px solid;
        border-radius: .05rem
        width: 100$
        .item-top
          overflow: hidden
          height: 0
          width: 100%
          padding-bottom: 139.6%
          position: relative
          .item-img
            width: 100%
            height: 100%
            position: absolute
        .item-middle
          padding-top: .07rem
          padding-left: .04rem
          display:flex
          justify-content center
          height: .20rem
          .item-title
            flex: 1
            color: #000
            font-size: .15rem
            line-height: .20rem
            ellipsis()
          .item-score
            width: .30rem
            line-height: .20rem
            font-size: .16rem
            color: orange
        .item-bottom
          padding-top: .04rem
          padding-left: .04rem
          display:flex
          justify-content center
          height: .20rem
          .item-desc
            flex: 1
            color: #ccc
            font-size: .14rem
            line-height: .20rem
            ellipsis()
          .item-comment
            width: .3rem
            height: .20rem
            position: relative
            color: #666
            box-sizing: border-box
            padding: .02rem
            .item-comment-icon
              font-size: .12rem
            .item-comment-num
              font-size: .10rem
              position:absolute
              top: 0
              left: .17rem

</style>
